<template>
  <div class="user">
   <div class="tianjia">
    <img src="../img/qindao.png" @click="shouye" />
    <h3>我的</h3>
    <img src="../img/set.png" @click="xiugai"/>
   </div>
    <div class="header" >
      <img class="avatar" :src="dalImg(userInfo.avatar)" alt="" />
      <h3>{{userInfo.nickname ? userInfo.nickname : userInfo.userName}}</h3>
      <p><span>等级:2</span><span>积分:116</span></p>
    </div>

    <div class="classify">
      <div class="nav">
      <div @click="shoucang" class="na"><span>{{product.length}}</span><p>收藏</p></div>
      <div @click="history" class="na"><span>{{goods.length}}</span><p>历史浏览</p></div>
      <div class="na"><span>0</span><p>关注</p></div>
      <div class="na"><span>0</span><p>粉丝</p></div>
      <div class="na"><span>0</span><p>帖子</p></div>
      </div>
      <div class="baozhen">
        <div>
          <h3>个人信息待完善</h3>
          <p>完善后，宝贝获得更多曝光</p>
        </div>
        <router-link :to="{name:'UserInfo'}">
        <Button round type="primary">去完善 </Button>
        </router-link>
      </div>
    </div>

    <div class="xia" style="margin-top: 18px;">
     <img src="../img/fabu.png" alt=""/>
     <div class="right">
      <p>我发布的</p>
      <p>0  <Icon name="arrow"/></p>
     </div>
    </div>
    <div class="xia">
    <img src="../img/money.png" alt="">
     <div class="right">
      <p>我卖出的</p>
      <p>0  <Icon name="arrow"/></p>
     </div>
    </div>
    <div class="xia">
    <img src="../img/cart.png" alt="">
     <div class="right">
      <p>我买到的</p>
      <p>0  <Icon name="arrow" /></p>
     </div>
    </div>
    <div class="xia">
    <img src="../img/paimai.png" alt="">
     <div class="right">
      <p>我的拍卖</p>
      <p>0  <Icon name="arrow"/></p>
     </div>
    </div>
    <div class="xia">
    <img src="../img/address.png" alt="">
    <div class="right">
      <p>我的收货地址</p>
      <router-link :to="{name:'Address'}"> <p>2 <Icon name="arrow"/></p></router-link>
     </div>
    </div>
   
  </div>
</template>

<script setup>
import { ref } from "vue";
import {  Button,Icon} from "vant";
import { loadUserInfoAPI,shoucangAPI,watchhistoryAPI} from "../services/shop";
import{dalImg} from "../utils/tools"
import{useRouter}from "vue-router"
const router=useRouter()
const userInfo = ref({});
const product=ref("")
const goods=ref("")

loadUserInfoAPI().then((res) => {
  userInfo.value = res.data;

});

const shouye=()=>{
  router.push({
    name:'Home'
  })
}
const xiugai=()=>{
  router.push({
    name:'Mima'
  })
}
const shoucang=()=>{
  router.push({
    name:"Shoucang"
  })
}
const history=()=>{
  router.push({
    name:"History"
  })
}
shoucangAPI().then((res) => {
 product.value=res.data
 console.log(res)
}); 

watchhistoryAPI().then((res) => {
  goods.value = res.data;
  console.log(res);
});
</script>

<style scoped>
.user {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.tianjia{
  display:flex;
  justify-content:space-between;
  padding:10px 20px ;
  background-color:#ffe577;
}
.tianjia img{
  width:6vw;
}

.header {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-image: url("../img/userbac.png");
  background-size:cover;
  margin-top:-1px;
}
.header img {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  display: block;
  margin: 8px auto;
}
.header h3 {
  padding: 4px;
  text-align: center;
  border-bottom: 1px solid #797777;
  margin: 0;
}
.header p {
  text-align: center;
  margin: 8px auto;
  font-weight: bold;
  color: rgb(200, 8, 8);
}
.classify {
  height: 25vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f6f6;
}
.nav {
  height: 10vh;
  background-color: white;
  margin-top: 6px;
  display:flex;
  justify-content: space-around;
}
.nav .na{
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  padding:5px;
}
.nav p{
  text-align:center
}
.baozhen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 13vh;
  margin-top: 6px;
  padding: 0 20px;
  background-image: url("../img/bac1.jpg");
  background-size:cover;
}
.baozhen h2 {
  color: #313131;
  margin-bottom: 0;
}
.baozhen button {
  font-size: 16px;
}

.baozhen p {
  color: #6c6b6b;
  font-size: 14px;
  margin-top: 10px;
}
.xia{
  display: flex;
  flex-direction: row;
  margin: 10px;
}
.xia img{
  display: block;
  margin-right: 20px;
  width: 12vw;
 
}
.right{
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(186, 183, 183);
}

</style>
